<template>
	<view class="page">
		<view class="weui-page__back">
			<image src="https://img.2024csnl.com/static/2.x/a97.png" mode="widthFix"></image>
		</view>
		<view class="mine">
			<view class="user-2x">
				<view class="user">
					<view class="avatar">
						<image :src="centerMsg.headimg" mode=""></image>
					</view>
					<view class="exp">
						<view class="" style="display: flex; align-items: center;">
							<view class="name">
								<text>{{centerMsg.nickname}}</text>
							</view>
						</view>
						<view class="uid">
							<text>ID: {{ centerMsg.id ? centerMsg.id : '暂无' }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="account-box">
				<view class="thead">
					<view class="left">
						<text>账户余额（￥）</text>
					</view>
					<view
						class="right"
						@click="changeShow">
						<text v-if="isShow">隐藏</text>
						<text v-else>显示</text>
					</view>
				</view>
				<view class="tbody">
					<view class="left">
						<view class="money">
							<text v-if="isShow">{{ centerMsg.money }}</text>
							<text v-else>******</text>
						</view>
						<view class="link" @click="onSkip(`/package/mine/myBalance?type=1`)">
							<text>查看明细</text>
							<image src="https://img.2024csnl.com/static/2.x/a48.png" mode=""></image>
						</view>
					</view>
					<view class="right">
						<view
							class="btn"
							@click="onSkip(`/business/pages/business_tab/balanceWithdrawal`)">
							<text>提现</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="tbox">
				<view class="list">
					<view class="item">
						<view class="cell">
							<view class="thead">
								<view class="title">
									<text>我的营业额</text>
								</view>
							</view>
							<view class="tbody">
								<view class="rows">
									<view class="label">
										<text>累计营业额（￥）</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.total_yingye_amount }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>今日营业额（￥）</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.today_yingye_amount || '-' }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>本月营业额（￥）</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.month_yingye_amount }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="cell">
							<view class="thead">
								<view class="title">
									<text>我的收益</text>
									<image src="https://img.2024csnl.com/static/2.x/a49.png" mode=""></image>
								</view>
							</view>
							<view class="tbody">
								<view class="rows">
									<view class="label">
										<text>累计收益（￥）</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.total_income }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>今日收益（￥）</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.today_income || '-' }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>本月收益（￥）</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.month_income }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="cell">
							<view class="thead">
								<view class="title">
									<text>我的订单</text>
									<image src="https://img.2024csnl.com/static/2.x/a49.png" mode=""></image>
								</view>
								<view class="link">
									<image src="https://img.2024csnl.com/static/2.x/a27.png" mode=""></image>
								</view>
							</view>
							<view class="tbody">
								<view class="rows">
									<view class="label">
										<text>累计订单</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.total_order_qty }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>今日订单</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.today_order_qty || '-' }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>本月订单</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.month_order_qty }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="cell">
							<view class="thead">
								<view class="title">
									<text>我的社群</text>
									<image src="https://img.2024csnl.com/static/2.x/a49.png" mode=""></image>
								</view>
								<view class="link">
									<image src="https://img.2024csnl.com/static/2.x/a27.png" mode=""></image>
								</view>
							</view>
							<view class="tbody">
								<view class="rows">
									<view class="label">
										<text>累计社群</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.total_team_qty }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>今日社群</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.today_team_qty || '-' }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>本月社群</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.month_team_qty }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="cell">
							<view class="thead">
								<view class="title">
									<text>我的店面</text>
									<image src="https://img.2024csnl.com/static/2.x/a49.png" mode=""></image>
								</view>
								<view class="link">
									<image src="https://img.2024csnl.com/static/2.x/a27.png" mode=""></image>
								</view>
							</view>
							<view class="tbody">
								<view class="rows">
									<view class="label">
										<text>累计店面</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.total_store_qty }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>今日店面</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.today_store_qty || '-' }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>本月店面</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.month_store_qty }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="cell">
							<view class="thead">
								<view class="title">
									<text>我的区域股东</text>
									<image src="https://img.2024csnl.com/static/2.x/a49.png" mode=""></image>
								</view>
								<view class="link">
									<image src="https://img.2024csnl.com/static/2.x/a27.png" mode=""></image>
								</view>
							</view>
							<view class="tbody">
								<view class="rows">
									<view class="label">
										<text>累计股东</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.total_qygshhr_qty }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>今日股东</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.today_qygshhr_qty || '-' }}</text>
									</view>
								</view>
								<view class="rows">
									<view class="label">
										<text>本月股东</text>
									</view>
									<view class="value">
										<text>{{ dataMsg.month_qygshhr_qty }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					<!-- loop -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { $get, $post } from '@/api'
	
	export default {
		data() {
			return {
				isShow: true,
				// 用户
				centerMsg: {},
				dataMsg: {}
			}
		},
		onLoad () {
			
		},
		async onShow () {
			await this.onGetDataCenter();
		},
		methods: {
			changeShow () {
				this.isShow = !this.isShow;
			},
			async onGetDataCenter() {
				const res = await $get('s=/ApiZwyRequest/incomeinfo')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					const dataMsg = JSON.parse(JSON.stringify(data)).datainfo;
					console.log('incomeinfo==> ', data)
					this.dataMsg = dataMsg;
					this.centerMsg = {
						business: data.business,
						headimg: data.headimg,
						id: data.id,
						leveltext: data.leveltext,
						money: data.money,
						nickname: data.nickname,
						score: data.score
					}
				} else {}
			},
		}
	}
</script>

<style lang="less" scoped>
	.mine {
		min-height: 100vh;
		background: #f8f8f8;
		padding: 80rpx 22rpx 0 22rpx;
	}
	
	.user-2x {
		position: relative;
		overflow: hidden;
		margin: 0 -20rpx;
		padding: 0 20rpx;
		.btns {
			position: relative;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-right: -40rpx;
			.btn {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				background: #ffffff;
				margin: 6rpx;
				border-radius: 40rpx;
				&:last-child {
					border-radius: 40rpx 0 0 40rpx;
				}
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
				text {
					font-size: 26rpx;
					margin-left: 10rpx;
				}
			}
		}
		.user {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.avatar {
				margin-right: 20rpx;
				image {
					display: block;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					border: 4px solid #ffffff;
					background: #eeeeee;
				}
			}
			.exp {
				flex: 1;
			}
			.name {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 40rpx;
				color: #ffffff;
				font-weight: bold;
				margin-right: 20rpx;
			}
			.tag {
				display: flex;
				align-items: center;
				padding: 10rpx;
				border-radius: 10rpx;
				background: -webkit-linear-gradient(left, rgba(253, 214, 159, 1), rgba(253, 214, 159, .5));
				image {
					display: block;
					width: 30rpx;
					height: 30rpx;
				}
			}
			.uid {
				margin: 20rpx 0 0 0;
				text {
					display: inline-flex;
					line-height: 30rpx;
					padding: 10rpx 20rpx;
					border: 1px solid #ffffff;
					border-radius: 10rpx;
					color: #ffffff;
				}
			}
		}
	}
	
	.account-box {
		position: relative;
		margin-top: 60rpx;
		background: url('https://img.2024csnl.com/static/2.x/a47.png') center center no-repeat #fff;
		background-size: 100% 100%;
		border-radius: 20rpx;
		padding: 30rpx;
		color: #fff;
		.thead {
			display: flex;
			.left {
				flex: 1;
				line-height: 60rpx;
			}
			.right {
				line-height: 60rpx;
			}
		}
		.tbody {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.left {
				flex: 1;
				.money {
					line-height: 60rpx;
					font-size: 56rpx;
					font-weight: bold;
				}
				.link {
					line-height: 60rpx;
					display: flex;
					align-items: center;
					image {
						display: block;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.right {
				.btn {
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 60rpx;
					padding: 0 40rpx;
					background: -webkit-linear-gradient(left, #ffffff, #FFE2D5);
					color: #E86A33;
					font-size: 30rpx;
				}
			}
		}
	}
	
	.tbox {
		.list {
			padding: 0 0 40rpx;
		}
		.item {
			&:nth-child(1) .thead::before {
				background: #E96464;
			}
			&:nth-child(2) .thead::before {
				background: #D5BF52;
			}
			&:nth-child(3) .thead::before {
				background: #6490E9;
			}
			&:nth-child(4) .thead::before {
				background: #52D59A;
			}
			&:nth-child(5) .thead::before {
				background: #1CC2DB;
			}
			&:nth-child(6) .thead::before {
				background: #C0A419;
			}
		}
		.cell {
			margin: 20rpx 0;
			position: relative;
			background: #ffffff;
			border-radius: 20rpx;
		}
		.thead {
			position: relative;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			&:before {
				content: '';
				position: absolute;
				left: 10rpx;
				top: 50%;
				margin-top: -15rpx;
				height: 30rpx;
				width: 8rpx;
				background: #000;
				border-radius: 10rpx;
			}
			.title {
				flex: 1;
				line-height: 100rpx;
				font-size: 30rpx;
				font-weight: bold;
				image {
					display: inline-flex;
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					margin-left: 10rpx;
				}
			}
			.link {
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.tbody {
			display: flex;
			margin-top: -30rpx;
			.rows {
				flex: 1;
				padding: 20rpx 0 20rpx 30rpx;
			}
			.label {
				line-height: 40rpx;
				color: #999;
			}
			.value {
				line-height: 60rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #000;
			}
		}
	}
</style>
